<template>
	<view class="main-content"  v-if="isLoad">
		<view class="main-column" v-for="item in showData" :key="item.id"  @click="toDetail(item.id)">
			<!-- 被驳回提示 -->
			<view class="reject-box" v-if="type == 'myposts' && status == 3">驳回原因：{{item.reject_reason || '帖子内容不符，请修改后重新提交审核' }}</view>
			<!-- 用户信息 -->
			<view class="user-info">
				<view class="infos">
					<view class="info-left"><image :src="item.avatar" mode="aspectFit"></image></view>
					<view class="info-right">
						<view class="right-title">{{ item.nickname }}</view>
						<view class="right-time">发布于&nbsp;{{ item.time }}</view>
					</view>
				</view>
				<view class="info-status" v-if="type == 'myposts' && status == 1" style="font-size:32rpx;color: #FB7A26;">待审核</view>
				<view class="info-status" v-if="type == 'myposts' && status == 2" style="font-size:32rpx;color: #3AB74E;">已发布</view>
				<view class="info-status" v-if="type == 'myposts' && status == 3" style="font-size:32rpx;color: #F00;">已驳回</view>
			</view>
			<!-- 用户发布的内容 -->
			<view class="user-cont">
				<!-- 文字描述 -->
				<view class="text-cont">{{ item.content }}</view>
				<!-- 图片显示 -->
				<view class="img-cont" v-if="item.images.length">
					<image :src="value" mode="aspectFit" v-for="(value, index) in item.images" :key="index"></image>
					<!-- 共计张 -->
					<view class="img-mount">共{{ item.imagesNum }}张</view>
				</view>
			</view>
			<!-- 点赞信息 -->
			<view class="bottom-cont">
				<view class="left-label">{{ item.title }}</view>
				<view class="right-like" v-if="type == 'myposts' || type == 'mylike'">
					<view class="likes" @click.stop="likePosts(item.id, item.give_status)">
						<image :src="item.give_status == 1 ? '/static/forum/like-check.png' : '/static/forum/like.png'" mode="aspectFit"></image>
						<text>{{ item.give }}</text>
					</view>
					<view class="comment">
						<image :src="item.comment_status == 1 ? '/static/forum/comment-check.png' : '/static/forum/comment.png'" mode="aspectFit"></image>
						<text>{{ item.comment }}</text>
					</view>
					<view class="collection" @click.stop="collections(item.id, item.collection_status)">
						<image
							:src="item.collection_status == 1 ? '/static/forum/collection-check.png' : '/static/forum/collection.png'"
							mode="aspectFit"
						></image>
						<text>{{ item.collection }}</text>
					</view>
				</view>

				<view class="right-like" v-else>
					<view class="likes" @click.stop="likePosts(item.id, item.give_status)">
						<image :src="item.give_status == 1 ? '/static/forum/like-check.png' : '/static/forum/like.png'" mode="aspectFit"></image>
						<text>{{ item.give }}</text>
					</view>
					<view class="comment">
						<image :src="item.comment_status == 1 ? '/static/forum/comment-check.png' : '/static/forum/comment.png'" mode="aspectFit"></image>
						<text>{{ item.comment }}</text>
					</view>
				</view>
			</view>

			<!-- 帖子修改 -->
			<view class="posts-alter" v-if="type == 'myposts'">
				<view class="alters" @click.stop="alterpost(item.id)">
					<image src="/static/forum/alter.png" modex="aspectFit"></image>
					<text>修改帖子</text>
				</view>
				<view class="delete" @click.stop="deletepost(item.id)">
					<image src="/static/forum/dell.png" modex="aspectFit"></image>
					<text>删除帖子</text>
				</view>
			</view>
		</view>
		<view class="empty" v-if="showData.length == 0">
			<image src="/static/empty.png" mode="widthFix" style="width: 150rpx;height: 150rpx;"></image>
			暂无数据~
		</view>
		<view style="margin: 10rpx 0;color: #cccccc;font-size: 26rpx;text-align: center;" v-if="showData.length != 0">没有更多了~</view>
	</view>
</template>

<script>
var app = getApp()
import ikz from '@/pages/Common/tools.js'
export default {
	props: ['showData', 'type', 'status'],
	data() {
		return {
			adminImgPath: app.globalData.adminImgPath,
			isLoad:false,
			like: true,
			comment: true,
			collection: true,
			flag: false,
			isShow: false,
			isFlag: false,
		}
	},
	watch: {
		status: {
			handler(newName, oldName) {
				setTimeout(()=>{
					this.isLoad = true
				},500)
			},
			immediate: true,
			deep: true,
		},
	},
	
	methods: {
		// 去详情页
		toDetail(id) {
			if(!uni.getStorageSync('local_user_session')) {
				uni.redirectTo({
					url:"/pages/login/index"
				})
				return
			}	
			if ((this.type == 'myposts' && this.status == 1) || (this.type == 'myposts' && this.status == 3)) {
				uni.navigateTo({
					url: '/pages/Component/forum/Program/index/listDetail?hide=true&id=' + id,
				})
			} else {
				uni.navigateTo({
					url: '/pages/Component/forum/Program/index/listDetail?id=' + id,
				})
			}
		},

		// 修改帖子
		alterpost(id) {
			// 跳转修改页面
			uni.navigateTo({
				url: '/pages/Component/forum/Program/release/release?type=1&id=' + id,
			})
		},

		// 删除帖子
		deletepost(id) {
			uni.showModal({
				// title: '删除提示',
				// title: '是否删除此帖子，确认删除请点击删除按钮',
				content: '是否删除此帖子，确认删除请点击删除按钮',
				confirmText: '删除',
				confirmColor: '#F00',
				cancelColor: '#999',
				success: res => {
					if (res.confirm) {
						this.$emit('delPosts', id)
					}
				},
			})
		},

		// 点赞帖子
		likePosts(id, status) {
			this.$emit('likePosts', id, status)
		},
		// 收藏/取消收藏
		collections(id, status) {
			this.$emit('collections', id, status)
		},
	},
}
</script>

<style lang="scss">
.main-content {
	.main-column {
		background: #ffffff;
		padding: 26rpx;
		margin-bottom: 16rpx;
		border-radius: 5px;

		.reject-box {
			padding: 22rpx 32rpx;
			margin-bottom: 10rpx;
			background: #fff2f2;
			border-radius: 5px;
			font-size: 24rpx;
			line-height: 34rpx;
			color: #ff0000;
		}

		.user-info {
			padding: 5rpx;
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.infos {
				display: flex;
				align-items: center;

				.info-left {
					height: 80rpx;
					margin-right: 20rpx;

					image {
						width: 86rpx;
						height: 86rpx;
						border-radius: 50%;
					}
				}

				.info-right {
					height: 80rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.right-title {
						font-size: 28rpx;
					}

					.right-time {
						font-size: 24rpx;
						color: #999999;
					}
				}
			}
		}

		.user-cont {
			margin-top: 12rpx;

			.text-cont {
				font-size: 28rpx;
				color: #666666;
				line-height: 50rpx;

				overflow: hidden; /*超出部分隐藏*/
				text-overflow: ellipsis; /* 超出部分显示省略号 */
				white-space: nowrap; /*规定段落中的文本不进行换行 */
				width: 100%; /*需要配合宽度来使用*/
			}

			.img-cont {
				margin-top: 20rpx;
				width: 100%;
				height: 160rpx;
				border-radius: 18rpx;
				display: flex;
				overflow: hidden;
				position: relative;

				image {
					width: 33%;
					height: 160rpx;
					margin-right: 1%;

					&:last-child {
						margin-right: 0;
					}
				}

				.img-mount {
					width: 80rpx;
					height: 40rpx;
					background: rgba(0, 0, 0, 0.5);
					border-radius: 6rpx;
					position: absolute;
					font-size: 22rpx;
					color: #ffffff;
					bottom: 10rpx;
					right: 20rpx;
					text-align: center;
					line-height: 40rpx;
				}
			}
		}

		.bottom-cont {
			margin-top: 30rpx;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left-label {
				padding:1rpx 8rpx;
				text-align: center;
				line-height: 50rpx;
				color: #fb7a26;
				font-size: 23rpx;
				background: #fff2d9;
				border-radius: 12rpx;
			}

			.right-like {
				width: 240rpx;
				font-size: 22rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;

				.likes {
					display: flex;
					align-items: center;

					image {
						width: 50rpx;
						height: 50rpx;
						margin-right: 10rpx;
					}
				}

				.comment {
					display: flex;
					align-items: center;

					image {
						width: 50rpx;
						height: 50rpx;
						margin-right: 10rpx;
					}
				}
			}

			.right-like {
				width: 340rpx;
				font-size: 22rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;

				.likes {
					display: flex;
					align-items: center;

					image {
						width: 50rpx;
						height: 50rpx;
						margin-right: 10rpx;
					}
				}

				.comment {
					display: flex;
					align-items: center;

					image {
						width: 50rpx;
						height: 50rpx;
						margin-right: 10rpx;
					}
				}

				.collection {
					display: flex;
					align-items: center;

					image {
						width: 50rpx;
						height: 50rpx;
						margin-right: 10rpx;
					}
				}
			}
		}

		.posts-alter {
			width: 100%;
			display: flex;
			justify-content: space-between;
			padding: 26rpx 0 0;

			.alters {
				width: 48%;
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 5%;
				background: rgba(255, 241, 204, 0.5);
				border-radius: 18rpx;
				color: #fb7a26;
				font-size: 28rpx;

				> image {
					width: 45rpx;
					height: 45rpx;
					display: block;
					margin-right: 20rpx;
				}
			}

			.delete {
				width: 48%;
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: rgba(250, 83, 65, 0.1);
				border-radius: 18rpx;
				color: #ff0000;
				font-size: 28rpx;

				> image {
					width: 45rpx;
					height: 45rpx;
					display: block;
					margin-right: 20rpx;
				}
			}
		}
	}
	.empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #999999;
		margin-top: 77rpx;
		font-size: 24rpx;
		image {
			margin: 50rpx 0 20rpx;
		}
	}
}
</style>
